<template>
  <div class="wdfw">
    <Card>
      <div slot="cRight" style="margin-right: 20px">
        <el-button type="primary" size="mini" @click="dialogVisible = true">
          新增扩容
        </el-button>
      </div>
      <div slot="cRight">
        <el-input placeholder="搜索服务" size="small"></el-input>
      </div>
      <section>
        <Table :tableData="tableData" @btnClick="dialogVisibleA = true"></Table>
        <Pagination :total="tableData.row.length"></Pagination>
      </section>
    </Card>

    <el-dialog
      close="dialog"
      title="新增服务"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <Xzkr />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            addTableData()
            $message({
              message: '保存成功',
              type: 'success'
            })
          "
        >
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      close="dialog"
      title="扩容更新"
      :visible.sync="dialogVisibleA"
      width="60%"
    >
      <el-form size="mini" inline>
        <el-form-item label="最小副本数">
          <el-input placeholder="如：1" v-model="valA"></el-input>
        </el-form-item>
        <el-form-item label="最大副本数">
          <el-input placeholder="如：30" v-model="valB"></el-input>
        </el-form-item>
        <el-form-item label="目标值">
          <el-input placeholder="如：50" v-model="valC"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleA = false">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
import Xzkr from './components/Xzkr'
export default {
  components: {
    Card,
    Table,
    Pagination,
    Xzkr
  },

  data() {
    return {
      valA: '',
      valB: '',
      valC: '',
      dialogVisible: false,
      dialogVisibleA: false,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '名称'
          },
          {
            prop: 'colC',
            label: '命名空间'
          },
          {
            prop: 'colD',
            label: '用户'
          },
          {
            prop: 'colE',
            label: '时间'
          },
          {
            prop: 'colF',
            label: '状态'
          },
          {
            prop: 'colI',
            label: '操作',
            type: 'Button',
            width: '300px',
            btnList: [{ label: '修改' }, { label: '克隆' }, { label: '删除' }]
          }
        ],
        row: [
          {
            colA: '3689',
            colB: '容量升级',
            colC: 'save-sec',
            colD: 'ALin',
            colE: '2020-9-10',
            colF: '升级完成'
          }
        ]
      }
    }
  },

  methods: {
    addTableData() {
      this.tableData.row.push({
        colA: '3690',
        colB: '内存扩容',
        colC: 'nf-kf',
        colD: 'ALin',
        colE: '2020-11-10',
        colF: '升级完成'
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
